<template>
  <div>
    <h1>图片和图标引入</h1>
    <div>
      <!-- 第一种 -->
      <h2>第一种</h2>
      <!-- ../../相对路径，第一种适合写死的图片 -->
      <img src="../../assets/img/logo.png" alt="" />
      <img src="@/assets/img/logo.png" alt="" />
      <hr />
      <h2>第二种</h2>
      <!-- 常用于在业务中要改变图片变量控制import logo from '@/assets/img/logo.png'-->
      <img :src="logo" />
      <button @click="handClick1">点击事件改变第二种图片地址</button>
      <h2>第三种</h2>
      <!-- require 直接写入或者变量接收-->
      <!-- <img :src="require('@/assets/img/logo.png')" /> -->
      <img :src="pic" />
      <button @click="handClick2">点击事件改变第三种图片地址</button>
      <hr />
      <h2>第四种</h2>
      <!-- 第四种方法封装,$utils全局挂载的方法 -->
      <img :src="$utils.getImg(pic2)" alt="" />
      <button @click="handClick3">点击事件改变第四种方法图片地址</button>
      <!-- css背景图片 -->
      <h2>css背景图片</h2>
      <div class="bgimg"></div>
      <hr />
      <h2>
        字体图标https://blog.csdn.net/qq_35430000/article/details/87103050?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-87103050-blog-103974370.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-87103050-blog-103974370.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=2
      </h2>
      <p><i class="iconfont icon-youjiantou"></i></p>
      <p><i class="iconfont icon-xiajiantou"></i></p>
      <h2>svg图标</h2>
      <p>1.如图片方式引入，但是无法改变颜色</p>
      <img :src="tblogo" alt="" />
      <img :src="require('@/assets/img/tb.svg')" alt="" />
      <p>1.svg-icon全局组件用的svg-sprite-loader插件封装这种最好</p>
      <svg-icon icon-class="icon-tb" class="icon-tb" />
    </div>
  </div>
</template>

<script>
import logo from '@/assets/img/logo.png'
import tblogo from '@/assets/img/tb.svg'
export default {
  name: 'page-day17',
  data() {
    return {
      logo,
      pic: require('@/assets/img/logo.png'),
      pic0: require('@/assets/img/logo.png'),
      pic1: require('@/assets/img/pic1.png'),
      pic2: 'logo.png',
      tblogo
    }
  },
  methods: {
    getImg(name) {
      return require(`@/assets/img/${name}`)
    },
    handClick1() {
      this.logo = this.pic
    },
    handClick2() {
      this.pic = this.pic === this.pic0 ? this.pic1 : this.pic0
    },
    handClick3() {
      this.pic2 = this.pic2 === 'logo.png' ? 'pic1.png' : 'logo.png'
    }
  }
}
</script>

<style lang="scss" scoped>
img {
  width: 50px;
  height: auto;
}
.bgimg {
  width: 100px;
  height: 100px;
  background: url('@/assets/img/logo.png') left center/cover no-repeat;
}
.iconfont {
  color: red;
}
.icon-tb {
  color: rgb(194, 48, 22);
  font-size: 46px;
}
</style>
